<template>
  <view class="member-select-container">
    <view class="search-bar">
      <input v-model="search" :placeholder="$t('order_member.search_member_placeholder')" class="search-input"
        @confirm="onSearch" />
    </view>
    <scroll-view scroll-y class="member-list" @scrolltolower="loadMore">
      <view v-for="item in filteredList" :key="item.id" class="member-card" @click="selectMember(item)">
        <view class="member-name">{{ item.name || item.username }}</view>
        <view class="member-birthday">
          {{ $t('order_member.birthday') }}{{ item.date_of_birth || $t('order_member.not_filled') }}
        </view>
      </view>

      <view v-if="loading" class="loading">{{ $t('common.loading') }}</view>
      <view v-if="!hasMore && !loading" class="no-more">{{ $t('order_member.no_more') }}</view>
    </scroll-view>
  </view>
</template>

<script>
import { getMembers } from '@/api/user.js';
export default {
  data() {
    return {
      search: '',
      page: 1,
      pageSize: 10,
      loading: false,
      hasMore: true,
      memberList: []
    }
  },
  computed: {
    filteredList() {
      // 接口数据已做筛选，直接返回 memberList
      return this.memberList;
    }
  },
  onLoad() {
    this.initList();
  },
  methods: {
    async initList() {
      this.page = 1;
      this.hasMore = true;
      this.memberList = [];
      await this.loadMore();
    },
    async loadMore() {
      if (!this.hasMore || this.loading) return;
      this.loading = true;
      try {
        const res = await getMembers({
          page: this.page,
          pageSize: this.pageSize,
          name: this.search
        });
        const list = res.result?.items || [];
        if (this.page === 1) {
          this.memberList = list;
        } else {
          this.memberList = this.memberList.concat(list);
        }
        if (list.length < this.pageSize) {
          this.hasMore = false;
        } else {
          this.page++;
        }
      } catch (e) {
        this.hasMore = false;
      }
      this.loading = false;
    },
    selectMember(item) {
      // 选中会员时写入 localStorage
      uni.setStorageSync('helper_selected_member', item);
      // 回传事件
      uni.$emit('memberSelected', item);
      // 判断页面栈
      const pages = getCurrentPages();
      if (pages.length <= 1) {
        // 刷新进入的，直接跳转回 index
        uni.reLaunch({
          url: '/pages/order/index'
        });
      } else {
        // 正常返回
        uni.navigateBack();
      }
    },
    async onSearch() {
      this.page = 1;
      this.hasMore = true;
      this.memberList = [];
      await this.loadMore();
    }
  }
}
</script>

<style scoped>
.member-select-container {
  padding: 0 0 20px 0;
  background: #f7f7f7;
  min-height: 100vh;
}

.search-bar {
  padding: 16px 16px 8px 16px; /* 左右16px，与list一致 */
  background: #fff;
}

.search-input {
  width: 100%;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #ddd;
  padding: 0 16px;
  font-size: 16px;
  background: #f9f9f9;
  box-sizing: border-box;
}

.member-list {
  padding: 8px 0; /* 上下8px，左右0，交给card控制 */
}

.member-card {
  background: #fff;
  border-radius: 8px;
  margin: 0 16px 12px 16px; /* 左右16px与search-bar一致，底部12px */
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: box-shadow 0.2s;
  width: calc(100% - 32px); 
  box-sizing: border-box;
}

.member-card:active {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.member-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
}

.member-birthday {
  color: #888;
  font-size: 14px;
}

.loading,
.no-more {
  text-align: center;
  color: #888;
  padding: 12px 0;
  font-size: 14px;
}
</style>